<template>
  <a-input
      v-if="fieldType === 'FT01'"
      v-model:value="val"
      :disabled="disabled"
  />
  <a-input-number
      v-else-if="fieldType === 'FT02'"
      v-model:value="val"
      :disabled="disabled"
  />
  <a-input-number
      v-else-if="fieldType === 'FT03'"
      v-model:value="val"
      :disabled="disabled"
      :min="0"
      :max="100"
      :formatter="value => `${value}%`"
      :parser="value => value.replace('%', '')"
  />
  <a-switch
      v-else-if="fieldType === 'FT04'"
      v-model:checked="val"
      :disabled="disabled"
  />
  <a-select
      v-else-if="fieldType === 'FT05'"
      v-model:value="val"
      :options="items"
      :field-names="{ label: 'itemText', value: 'itemValue' }"
      :disabled="disabled"
      style="width: 100%"
  />
  <v-select-dict-item
      v-else-if="fieldType === 'FT06'"
      v-model="val"
      :disabled="disabled"
      :code="dictCode"
      style="width: 100%"
  />
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import VSelectDictItem from '@/components/VSelectDictItem.vue'

const props = defineProps({
  modelValue: String,
  disabled: {
    type: Boolean,
    default: false
  },
  fieldType: {
    type: String,
    required: true
  },
  items: {
    type: Array,
    required: false
  },
  dictCode: {
    type: String,
    required: false
  }
})

const val = computed({
  set: val => {
    if (!val && val !== false) {
      emits('update:modelValue', undefined)
    } else if (props.fieldType === 'FT01' || props.fieldType === 'FT05' || props.fieldType === 'FT06') {
      emits('update:modelValue', val)
    } else if (props.fieldType === 'FT04') {
      emits('update:modelValue', val ? '1' : '0')
    } else {
      emits('update:modelValue', val.toString())
    }
  },
  get: () => {
    if (!props.modelValue) {
      return undefined
    } else if (props.fieldType === 'FT01' || props.fieldType === 'FT05' || props.fieldType === 'FT06') {
      return props.modelValue
    } else if (props.fieldType === 'FT04') {
      return props.modelValue === '1'
    } else {
      return parseInt(props.modelValue)
    }
  }
})

const emits = defineEmits(['update:modelValue'])

// watch(() => props.modelValue, (value, oldValue) => {
//   console.log(`${oldValue}===>${value}`)
// })
// console.log(props.fieldType)
</script>

<style scoped>

</style>
